<template>
	<div class="login">
		<div class="login-weaper">
			<div class="login-left">
				<div class="login-time">{{ time.txt }}</div>
				<div class="login-left-box">
					<div>
						<div class="logo">{{ getThemeConfig.globalViceTitle }}</div>
						<h2 class="title">{{ getThemeConfig.globalViceDes }}</h2>
						<div class="msg">
							<div class="msg-author">
								<span>全面、规范、高效的智能环境管理工具，不怕查</span>
							</div>
							<div class="msg-txt">计划 | 档案 | 固(危) 废 | 废气 | 废水 | 噪声土壤 | 生产设施 | 数据权限</div>
						</div>
					</div>
				</div>
			</div>
			<div class="login-right">
				<div class="login-tabs">
					<div :class="['tab-item', loginType=='login'?'active':'']" @click="loginType='login'">登录</div>
					<div :class="['tab-item', loginType=='register'?'active':'']" @click="loginType='register'">注册</div>
				</div>
				<div class="login-main">
					<h4 class="login-title">{{ getThemeConfig.globalTitle }}</h4>
					<el-form class="el-form login-form" v-if="loginType=='login'">
						<el-form-item style="margin-left: 0px" prop="phoneNum">
							<el-input type="text" placeholder="账号" prefix-icon="el-icon-user" v-model="params.phoneNum"
								clearable autocomplete="off">
							</el-input>
						</el-form-item>
						<el-form-item style="margin-left: 0px" prop="password">
							<el-input type="password" placeholder="密码" prefix-icon="el-icon-lock" v-model="params.password"
								autocomplete="off" :show-password="true">
							</el-input>
						</el-form-item>
						<el-form-item style="margin: 80px 0px 0">
							<el-button type="primary" class="login-submit" @click="submitForm" :loading="submit.loading">
								<span>{{ $t('message.login.btnText') }}</span>
							</el-button>
						</el-form-item>
					</el-form>

					<el-form class="el-form login-form" v-if="loginType=='register'">
						<el-form-item style="margin-left: 0px" prop="phoneNum">
							<el-input type="text" placeholder="账号" prefix-icon="el-icon-user" v-model="resParams.phoneNum"
								clearable autocomplete="off">
							</el-input>
						</el-form-item>
						<el-form-item style="margin-left: 0px" prop="code">
							<div class="code-input-group">
								<el-input type="password" placeholder="验证码" prefix-icon="el-icon-chat-line-round"
									v-model="resParams.code" autocomplete="off" :show-password="true">
								</el-input>
								<el-button type="primary" @click="getCode" class="code-btn">
									<span>{{codeText}}</span>
								</el-button>
							</div>

						</el-form-item>
						<el-form-item style="margin: 80px 0px 0">
							<el-button type="primary" class="login-submit" @click="register" :loading="submit.loading">
								<span>注册</span>
							</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
		<div class="vue-particles">
			<vue-particles color="#ffffff" shapeType="circle" linesColor="#ffffff" hoverMode="grab" clickMode="push"
				style="height: 100%"></vue-particles>
		</div>


		<el-dialog :visible.async="show" :zIndex="999" @close="show = false">
			<bindUser :phoneNum="resParams.phoneNum"></bindUser>
		</el-dialog>


	</div>
</template>

<script>
	import {
		Session
	} from '@/utils/storage';
	import {
		formatDate,
		formatAxis
	} from '@/utils/formatTime';
	import {
		PrevLoading
	} from '@/utils/loading.js';
	import bindUser from '@/components/user/bindUser'
	import FWRSAHelper from "../../utils/RSA.js"

	let that
	export default {
		components: {
			bindUser,
		},
		name: 'login',
		data() {
			return {
				show: false,
				isView: false,
				codeText: "获取验证码",
				submit: {
					loading: false,
				},
				params: {
					phoneNum: '',
					password: '',
				},
				resParams: {
					phoneNum: '',
					code: ''
				},
				time: {
					txt: '',
					fun: null,
				},
				loginType: "login"
			};
		},
		computed: {
			// 获取当前时间
			currentTime() {
				return formatAxis(new Date());
			},
			// 获取布局配置信息
			getThemeConfig() {
				return this.$store.state.themeConfig.themeConfig;
			},
		},
		created() {
			this.initTime();
			// 检查URL参数
			this.checkUrlParams();
		},
		mounted() {
			that = this
			if (localStorage.getItem("loginInfo")) {
				let loginInfo = JSON.parse(localStorage.getItem("loginInfo"))
				that.params.phoneNum = loginInfo.phoneNum
				that.params.password = loginInfo.password
			}
			//this.initRandomQuotations();
		},
		methods: {
			// 检查URL参数
			checkUrlParams() {
				if (this.$route.query.isInspect) {
					let that = this
					let isInspectMode = this.$route.query.isInspect === 'true';
					localStorage.setItem("isInspectMode", isInspectMode)
					localStorage.setItem("entId", this.$route.query.entId)
					localStorage.setItem("recordId", this.$route.query.recordId)

					this.loading = true
					this.ajax({
						url: '/gov/inspection/record/getUser',
						data: {
							"ticketId": that.$route.query.ticketId,
						},
						success: function(result) {
							that.submit.loading = false
							if (result.status == 1) {
								let thisUser = result.data

								thisUser.nickName = thisUser.userName
								thisUser.userName = 'admin'
								thisUser.roles = ['admin'];
								thisUser.authBtnList = ['btn.add', 'btn.del', 'btn.edit', 'btn.link'];
								let userInfo = JSON.stringify(result.data.user)

								if (result.data && result.data.user) localStorage.setItem("user", userInfo)

								// 存储 token 到浏览器缓存
								Session.set('token', that.$route.query.ticketId)
								// 存储用户信息到浏览器缓存
								Session.set('userInfo', thisUser);
								// 存储用户信息到vuex
								that.$store.dispatch('userInfos/setUserInfos', thisUser);
								that.$store.commit('setToken', that.$route.query.ticketId);
								PrevLoading.start();

								that.$router.push('/home');

								setTimeout(() => {

									that.ajax({
										url: '/bbep/page/config/getConfig',
										data: JSON.stringify({}),
										contentType: 'application/json',
										dataType: 'json',
										success: function(result) {
											if (result.status == 1 && result.data) {
												result.data.entShortName = result.data.entShortName || ''
												result.data.gasOutlet = result.data.gasOutlet ||
													'ONLINE_MONITOR'

												Session.set('setting', result.data);
												that.$store.dispatch('userInfos/setSetting', result.data);
											}
										}
									})

									that.$message.success(
										`${that.currentTime}，${that.$t('message.login.signInText')}`);
								}, 1000);
							} else {
								that.submit.loading = false
								that.$message.error(result.data.msgInfo[0].errorContent);
							}
						},
						error: function(result) {
							console.log(result)
							that.submit.loading = false
						}
					})

				} else {
					localStorage.removeItem("isInspectMode")
				}
				//this.submitForm()
			},

			register(canNext) {
				if (!that.resParams.phoneNum) return that.$message.error('手机号不能为空');
				if (!that.resParams.code) return that.$message.error('验证码不能为空');

				that.submit.loading = true
				var param = {};
				var url = '';
				that.ajax({
					url: '/userRegister/checkIdentifyCode',
					data: {
						phoneNum: that.resParams.phoneNum,
						identifyCode: that.resParams.code
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						that.submit.loading = false
						if (result.data) {
							that.show = true
						} else {
							return that.$message.error('验证错误');
						}
					}
				});
			},

			getCode() {
				if (this.codeText != "获取验证码") return;
				if (!this.resParams.phoneNum) return that.$message.error('请填写手机号');

				that.sendCodeAjax();
			},


			sendCodeAjax() {
				that.ajax({
					url: '/userRegister/getSmsIdentifyCode.htm',
					data: {
						phoneNum: this.resParams.phoneNum,
						smsType: '3',
						smsOrigin: 'MINIPROGRAME'
					},
					contentType: 'application/x-www-form-urlencoded',
					success: (res) => {
						console.log(res.data);

						if (res.status == 1) {
							this.changeSecond();
						}
					},
					fail: function(res) {},
					complete: function(res) {}
				});
			},

			changeSecond() {
				that.codeText = 60
				var timer = setInterval(() => {
					if (that.codeText > 0) {
						that.codeText -= 1
					} else {
						clearInterval(timer);
						that.codeText = "获取验证码"
					}
				}, 1000);
			},

			// 初始化左上角时间显示
			initTime() {
				this.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
				this.time.fun = setInterval(() => {
					this.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
				}, 1000);
			},
			// 登录按钮点击
			submitForm() {
				this.submit.loading = true;

				if (that.params.phoneNum && that.params.password) {
					that.loading = true
					that.ajax({
						url: '/userLogin/login',
						data: {
							"phoneNum": that.params.phoneNum,
							"password": FWRSAHelper.FWRSAHelper.encrypt(that.params.password)
						},
						success: function(result) {
							that.submit.loading = false
							if (result.status == 1) {
								let thisUser = result.data.user

								thisUser.nickName = thisUser.userName
								thisUser.userName = 'admin'
								thisUser.roles = ['admin'];
								thisUser.authBtnList = ['btn.add', 'btn.del', 'btn.edit', 'btn.link'];
								let userInfo = JSON.stringify(result.data.user)

								if (result.data && result.data.user) localStorage.setItem("user", userInfo)
								localStorage.setItem("loginInfo", JSON.stringify({
									phoneNum: that.params.phoneNum,
									password: that.params.password
								}))

								// 存储 token 到浏览器缓存
								Session.set('token', result.data.ticketId)
								// 存储用户信息到浏览器缓存
								Session.set('userInfo', thisUser);
								// 存储用户信息到vuex
								that.$store.dispatch('userInfos/setUserInfos', thisUser);
								that.$store.commit('setToken', result.data.ticketId);
								PrevLoading.start();
								if (thisUser.entType == "DIS_FACILITATOR") {
									that.$router.push('/customs');
								} else {
									that.$router.push('/home');
								}
								setTimeout(() => {

									that.ajax({
										url: '/bbep/page/config/getConfig',
										data: JSON.stringify({}),
										contentType: 'application/json',
										dataType: 'json',
										success: function(result) {
											if (result.status == 1 && result.data) {
												result.data.entShortName = result.data.entShortName || ''
												result.data.gasOutlet = result.data.gasOutlet ||
													'ONLINE_MONITOR'

												Session.set('setting', result.data);
												that.$store.dispatch('userInfos/setSetting', result.data);
											}
										}
									})

									that.$message.success(
										`${that.currentTime}，${that.$t('message.login.signInText')}`);
								}, 1000);
							} else {
								that.submit.loading = false
								that.$message.error(result.data.msgInfo[0].errorContent);
							}
						},
						error: function(result) {
							console.log(result)
							that.submit.loading = false
						}
					})
				} else {
					that.submit.loading = false
					that.$message.error('请填写完整');
				}
			},
		},
		destroyed() {
			clearInterval(this.time.fun);
		},
	};
</script>

<style scoped lang="scss">
	.login {
		height: 100%;
		width: 100%;
		overflow: hidden;
		display: flex;
		position: relative;

		.vue-particles {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(135deg, rgba(30, 60, 114, 1) 0%, rgba(42, 82, 152, 1) 50%, rgba(83, 140, 198, 1) 100%);
		}

		.login-weaper {
			margin: auto;
			height: 560px;
			width: 1000px;
			display: flex;
			box-sizing: border-box;
			position: relative;
			z-index: 1;
			border: none;
			box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
			border-radius: 8px;
			overflow: hidden;

			.login-left {
				width: 500px;
				padding: 30px;
				font-size: 16px;
				color: var(--prev-color-text-white);
				position: relative;
				background-color: var(--prev-color-primary);
				display: flex;
				flex-direction: column;
				border-top-left-radius: 8px;
				border-bottom-left-radius: 8px;
				background-image: linear-gradient(135deg, rgba(0, 78, 161, 0.8) 0%, rgba(0, 99, 204, 0.8) 100%);
				box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);

				.login-time {
					width: 100%;
					color: rgba(255, 255, 255, 0.9);
					font-size: 14px;
					overflow: hidden;
					font-weight: 300;
					letter-spacing: 1px;
				}

				.login-left-box {
					flex: 1;
					overflow: hidden;
					position: relative;
					z-index: 1;
					display: flex;
					align-items: center;
					padding: 80px 20px;

					.logo {
						font-size: 28px;
						margin-bottom: 20px;
						font-weight: 600;
						text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
					}

					.title {
						color: var(--prev-color-text-white);
						font-weight: 300;
						letter-spacing: 2px;
						font-size: 18px;
						margin-bottom: 10px;
					}

					.msg {
						color: var(--prev-color-text-white);
						font-size: 14px;
						margin-top: 40px;
						background-color: rgba(255, 255, 255, 0.1);
						padding: 20px;
						border-radius: 8px;
						backdrop-filter: blur(5px);
						box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

						.msg-author {
							opacity: 0.9;
							font-weight: 500;
							font-size: 16px;
							margin-bottom: 10px;
						}

						.msg-txt {
							margin-top: 15px;
							line-height: 24px;
							letter-spacing: 1px;
							opacity: 0.8;
						}
					}
				}
			}

			.login-right {
				width: 500px;
				position: relative;
				background-color: var(--prev-bg-white);
				border-top-right-radius: 8px;
				border-bottom-right-radius: 8px;
				box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);

				.login-tabs {
					display: flex;
					border-bottom: 1px solid #eee;

					.tab-item {
						flex: 1;
						text-align: center;
						padding: 25px 0;
						font-size: 18px;
						cursor: pointer;
						transition: all 0.3s ease;
						color: #666;

						&:hover {
							color: var(--prev-color-primary);
						}

						&.active {
							color: var(--prev-color-primary);
							font-weight: bold;
							border-bottom: 3px solid var(--prev-color-primary);
						}
					}
				}

				.login-main {
					margin: 0 auto;
					width: 75%;
					padding: 40px 20px;
					margin-top: 20px;

					.login-title {
						color: #333;
						margin-bottom: 50px;
						font-weight: 600;
						font-size: 24px;
						text-align: center;
						letter-spacing: 2px;
					}

					.login-form {
						margin: 10px 0;

						i {
							color: var(--prev-color-text-primary);
						}

						.el-form-item {
							margin-bottom: 25px !important;

							.el-input__inner {
								height: 50px;
								line-height: 50px;
								border-radius: 4px;
								border: 1px solid #e0e0e0;
								padding-left: 45px;
								font-size: 15px;

								&:focus {
									border-color: var(--prev-color-primary);
									box-shadow: 0 0 8px rgba(0, 123, 255, 0.1);
								}
							}

							.el-input__prefix {
								left: 15px;

								i {
									line-height: 50px;
									font-size: 18px;
								}
							}

							.code-input-group {
								display: flex;
								align-items: center;

								.el-input {
									flex: 1;
								}

								.code-btn {
									width: 120px;
									margin-left: 15px;
									height: 32px;
									line-height: 32px;
									padding: 0;
								}
							}

							.login-submit {
								width: 100%;
								letter-spacing: 2px;
								height: 50px;
								font-size: 16px;
								border-radius: 4px;
								background: linear-gradient(135deg, #1e50a2 0%, #2a6bc2 100%);
								border: none;
								box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
								transition: all 0.3s ease;

								&:hover {
									transform: translateY(-2px);
									box-shadow: 0 7px 20px rgba(0, 123, 255, 0.4);
								}
							}
						}
					}
				}
			}
		}
	}
</style>